<template>
  <div class="card" :style="{ width, height }">
    <div class="top-box"></div>
    <div class="bottom-box"></div>
    <slot />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Card",
});

// props设置默认值
withDefaults(
  defineProps<{
    height?: string;
    width?: string;
  }>(),
  {
    height: "100%",
    width: "100%",
  }
);
</script>

<style scoped lang="scss">
.card {
  border: 1px solid $border-color-1;
  background-image: url("@/assets/line.png");
  background-repeat: no-repeat;
  position: relative;
}

@mixin border($position-1, $position-2) {
  position: absolute;
  #{$position-1}: 0;
  #{$position-2}: 0;
  width: 10px;
  height: 10px;
  border-#{$position-1}: 1px solid $border-color-2;
  border-#{$position-2}: 1px solid $border-color-2;
}

@mixin box-border($position) {
  position: absolute;
  #{$position}: 0;
  left: 0;
  width: 100%;
  &::before {
    content: "";
    @include border(left, $position);
  }
  &::after {
    content: "";
    @include border(right, $position);
  }
}

.top-box {
  @include box-border(top);
}

.bottom-box {
  @include box-border(bottom);
}

// @mixin border($position-1, $position-2) {
//   position: absolute;
//   #{$position-1}: 0;
//   #{$position-2}: 0;
//   width: 10px;
//   height: 10px;
//   border-#{$position-1}: 1px solid $border-color-2;
//   border-#{$position-2}: 1px solid $border-color-2;
// }

// .top-box {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   &::before {
//     content: "";
//     @include border(left, top);
//   }
//   &::after {
//     content: "";
//     @include border(right, top);
//   }
// }

// .bottom-box {
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 100%;
//   &::before {
//     content: "";
//     @include border(left, bottom);
//   }
//   &::after {
//     content: "";
//     @include border(right, bottom);
//   }
// }
</style>
